@import "../../styles/_variables";
@import "../../styles/_mixins";

.diagnostics-pane {
  height: 200px;
  border-top: 1px solid var(--playground-border);

  @include dark-mode {
    .empty-panel {
      background-color: #282c34;
    }
  }
}

.diagnostics-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.diagnostics-console {
  font-size: 14px;
}

ul.diagnostics-list {
  line-height: 30px;
  font-size: 14px;
  height: 100%;
  overflow: auto;

  @include dark-mode {
    background-color: #282c34;
  }

  li {
    padding-right: 10px;
    cursor: pointer;
    display: flex;
    white-space: pre;

    img {
      margin: 7px 10px;
      width: 16px;
      height: 16px;
    }

    .linecol {
      margin-left: auto;
    }

    &:nth-child(2n) {
      background-color: rgba(#000, 10%);
    }

    &:hover {
      background-color: rgba(#000, 20%);
    }
  }
}
